<template>
  <div class="order">
    <div class="my-head">
      <x-header>{{!type?'我发布的':'我接到的'}}<a slot="right" @click="handleClickType">{{!type?'我接到的':'我发布的'}}</a></x-header>
      <tab v-if="!type" :line-width="1" custom-bar-width="60px">
        <tab-item :selected="i===tabIndex" v-for="(item,i) in errandList" :key="i" @on-item-click="onItemClick(item, i)">{{item.name}}</tab-item>
      </tab>
      <tab v-else :line-width="1" custom-bar-width="80px">
        <tab-item :selected="i===tabIndex" v-for="(item,i) in secondList" :key="i" @on-item-click="onItemClick(item, i)">{{item.name}}</tab-item>
      </tab>
    </div>
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:95px;min-height: 500px;" ref="my_scroller">
      <div>
        <order-item :userId="userInfo._id" :datalist="list" @showdetail="showDetail" @remove="handleRemove" @onItemConfirm="onItemConfirm"></order-item>
        <!-- <order-item v-if="!type" :datalist="list" @showdetail="showDetail" @remove="handleRemove"></order-item>
        <second-order v-else :datalist="list" @remove="handleRemove"></second-order> -->
      </div>
    </scroller>
    <confirm v-model="showConfirm"
      title="删除提醒"
      @on-cancel="showConfirm=false"
      @on-confirm="onConfirm">
      <p style="text-align:center;">确认取消该订单吗？</p>
    </confirm>
    <!-- <x-dialog v-model="showDialog" :dialog-style="{'text-align': 'left'}" class="detail-content">
      <div class="detail-content">
        <order-item-dialog :order-item="orderItemDetail"></order-item-dialog>
      </div>
    </x-dialog> -->
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import OrderItem from './common/OrderItem'
import OrderItemDialog from './common/OrderItemDialog';
import SecondOrder from './common/SecondOrder'
import { Tab, TabItem, XHeader, XDialog, Confirm } from 'vux';
import { getUnixTime } from '../js/utils'
const ListStore = namespace('list');

@Component({
  components: { Tab, TabItem, Confirm, OrderItem, OrderItemDialog, XHeader, XDialog, SecondOrder }
})
export default class Order extends Vue {
  @ListStore.Action getCancelObtainPaotui
  @ListStore.Action getMyPaotuiList
  @ListStore.Action getMyObtainPaotuiList
  // @ListStore.Action getMySecondhands
  @ListStore.Action getRemoveErrand
  @ListStore.Action getConfirmPaotui
  @ListStore.State myPaotuiList
  @ListStore.State myObtainPaotuiList
  // @ListStore.State mySecondhands
  @ListStore.State removeErrand
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  showConfirm = false
  list = []
  type = false
  id = null
  currentPage = 1
  pageSize = 10
  tabIndex = 0
  reqStatus = false
  currentTabMenu = {}
  showDialog = false
  orderItemDetail = {}
  // errandList = ['历史订单', '待付款', '待接单', '待评价', '已取消']
  errandList = [
    {
      id: 1,
      status: '',
      name: '历史订单'
    }, {
      id: 2,
      status: 0,
      name: '待付款'
    },
    {
      id: 3,
      status: 1,
      name: '待接单'
    },
    {
      id: 4,
      status: 2.5,
      name: '待完成'
    }, {
      id: 5,
      status: 3,
      name: '待评价'
    }, {
      id: 6,
      status: -1,
      name: '已取消'
    }
  ]
  currentStatus = ''
  secondList = [
    {
      id: 11,
      status: '',
      name: '历史订单'
    }, {
      id: 12,
      status: 2,
      name: '待完成'
    },
    {
      id: 13,
      status: 3,
      name: '待评价'
    }
  ]
  noDataText = '--我也是有底线的--'
  infinite () {
    const query = this.$route.query;
    const queryStatus = query.status ? Number(query.status) : '';
    if (this.currentTabMenu.id > 10 || query.id > 10) {
      this.getScondList(this.currentTabMenu.status || queryStatus) // 我接收的
    } else {
      this.init(this.currentTabMenu.status) // 我发布的
    }
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  showDetail (item) {
    this.showDialog = true;
    this.orderItemDetail = item;
  }
  handleClickType () {
    this.list = []
    this.currentPage = 1
    this.type = !this.type
    this.reqStatus = false;
    // !this.type ? this.getScondList() : this.init()
    // this.tabIndex = 0
    if (this.type) {
      this.onItemClick(this.secondList[0], 0)
    } else {
      this.onItemClick(this.errandList[0], 0)
    }
  }
  getScondList (status) {
    if (this.reqStatus) {
      return false;
    }
    this.reqStatus = true;
    const params = {
      current: this.currentPage,
      createTime: getUnixTime(this.myTime),
      pageSize: this.pageSize
    }
    if (this.type && typeof status === 'number') {
      params.status = status;
    }
    if (status === 3) {
      params.isGetterCmt = false
    }
    // if (this.type && this.tabIndex === 1) {
    //   params.status = 1
    // }
    this.userInfo && this.getMyObtainPaotuiList(params).then(msg => {
      this.reqStatus = false
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.myObtainPaotuiList
        this.list = this.list.concat(list)
      }
    })
  }
  handleRemove (id) { // 删除订单
    this.id = id
    this.showConfirm = true
  }
  onItemClick (menu, i) {
    // this.currentStatus = ''
    this.tabIndex = i;
    this.reqStatus = false;
    this.currentPage = 1; // 重置list及页码
    this.list = [];
    this.currentTabMenu = menu; // 当前tab，用于下来刷新
    if (this.type) { // 我接到的
      // this.currentStatus = menu.status
      this.$router.push({path: '/order', query: {id: menu.id, status: menu.status}})
      // this.getScondList(menu.status)
    } else { // 我发布的
      // this.currentStatus = menu.status
      this.$router.push({path: '/order', query: {id: menu.id, status: menu.status}})
      // this.init(menu.status)
    }
    this.infinite()
  }
  onConfirm () {
    const params = {
      _id: [this.id]
    }
    this.getRemoveErrand(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.init();
        this.$vux.toast.text('删除订单成功', 'middle');
      }
    })
  }
  init (status) {
    if (this.reqStatus) {
      return false;
    }
    this.reqStatus = true;
    let params = {
      current: this.currentPage,
      createTime: getUnixTime(this.myTime),
      pageSize: this.pageSize
    }
    if (typeof status === 'number') {
      params.status = status;
    }
    if (status === 3) {
      params.isCreatorCmt = false
    }
    this.userInfo && this.getMyPaotuiList(params).then(msg => {
      this.reqStatus = false
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.myPaotuiList
        if (this.currentStatus === status) {
          this.list = this.list.concat(list)
        } else {
          this.list = list;
        }
      }
    })
  }
  created () {
    this.getInitData();
  }
  getInitData () {
    const query = this.$route.query;
    this.$route.query = {
      type: 1,
      status: ''
    }
    const queryStatus = query.status ? Number(query.status) : '';
    if (query.id > 10) {
      this.type = true;
      this.tabIndex = query.id - this.secondList[0].id
      this.getScondList(queryStatus) // 我接收的
    } else {
      this.tabIndex = query.id - 1
      this.init(queryStatus) // 我发布的
    }
  }
  onItemConfirm (_id, status) {
    this.getConfirmPaotui({_id, status}).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('确认成功', 'middle');
        this.getInitData();
      }
    })
  }
}
</script>
<style lang="less">
  .order {
    padding-top: 51px;
    .vux-header-left {
      display: none;
    }
    .detail-content {
      .weui-dialog {
        max-width: 310px!important;
      }
    }
  }
</style>
